<template>
  <div class="muBanner">
    <div class="list" v-for="item in items">
      <img :src="item.src" />
      <div class="content">
        <div class="h-cont">
          <div class="title">{{item.title}}</div>
          <div class="eTitle">{{item.eTitle}}</div>
        </div>
      </div>
    </div>
  </div>
</template>
<style lang="less">
  .muBanner {
    position: relative;
    img {
      width: 100%;
      min-height: 150px;
    }
    .content {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      color: white;
      .h-cont {
        position: relative;
        top: 45%;
      }
      .title {
        text-align: center;
        font-size: 24px;
        line-height: 40px;
      }
      .eTitle {
        text-align: center;
        line-height: 40px;
      }
    }
  }

  @media screen and (max-width: 900px) {
    .muBanner {
      .content {
        .h-cont {
          top: 25%;
        }
      }
    }
  }

</style>

<script>
  export default {
    name: 'banner',
    props: {
      items: {
        type: Array,
        default: function () {
          return []
        }
      }
    }
  }

</script>
